import { FC, memo } from 'react';
import { HStack, Image, VStack, Text, Box } from '@chakra-ui/react';

interface IProps {
    album: {
        id: number;
        name: string;
        picUrl: string;
        bio: string;
    };
}

const AlbumItem: FC<IProps> = ({ album }) => (
    <HStack

        key={album.id}
        spacing={2}
        w="100%"
        h="100px"
        overflow="hidden"
        align="start"
        p={4}
        alignItems="center"
        _hover={{ bg: 'gray.100' }}
        transition="background 0.3s" // 添加过渡效果，使背景变化更平滑
    >
        <Image
            src={album.picUrl}
            boxSize="50px"
            aspectRatio={1}
            alt={`${album.name} 封面`} // 添加 alt 属性以提高可访问性
        />
        <VStack pl={2} alignItems="start" spacing={0}>
            <Text fontWeight="bold" fontSize="sm">
                {album.name}
            </Text>
            <Text fontWeight="thin" fontSize="sm" noOfLines={2}>
                {album.bio}
            </Text>
        </VStack>
    </HStack>
);

export default memo(AlbumItem);